<template>
    <div class="guideCards">
        <div style="margin-bottom: 15px">
            <el-button type="primary" size="small" plain @click="addCard">添加卡片</el-button>
            <span style="color: #90979D;margin-left: 15px">建议4-6个最佳</span>
        </div>
        <div class="channelCard" v-for="(item,i) in list" :key="i">
            <div class="cardTitle flexbetween">
                <span>{{'卡片' + (i + 1)}}</span>
                <div class="iconBtn">
                    <el-tooltip effect="light" content="上移" placement="top" :enterable="false">
                        <span :class="['iconfont', 'icon-xiangshangyiji',{'disabled': i == 0}]" @click="cardUp(i)"></span>
                    </el-tooltip>
                    <el-tooltip effect="light" content="下移" placement="top" :enterable="false">
                        <span :class="['iconfont', 'icon-xiangxiayiji',{'disabled': i == list.length - 1}]" @click="cardDown(i)"></span>
                    </el-tooltip>
                    <el-tooltip effect="light" content="删除" placement="top" :enterable="false">
                        <span class="iconfont icon-shanchu" @click="delCard(i)"></span>
                    </el-tooltip>
                </div>
            </div>
            <div class="cardContent">
                <div class="cardItem">
                    <span class="label">名称</span>
                    <el-input v-model="item.name" placeholder="请输入" size="small"></el-input>
                </div>
                <div class="cardItem">
                    <span class="label">点击内容</span>
                    <div class="cardFlex" @click="relationKnowledge(i)">
                        <p><span style="margin-right: 8px">(关联知识)</span><span>{{item.question}}</span></p>
                        <span class="iconfont icon-bianji"></span>
                    </div>
                </div>
                <div class="cardItem" style="margin-bottom: 0">
                    <span class="label">图片</span>
                    <div style="width: 100px;height:100px;cursor: pointer;" @click="cardUpload(i)">
                        <div v-if="item.coverUrl == ''" class="addImg"><span class="iconfont icon-tianjia"></span>
                        </div>
                        <el-image v-else style="width: 100px;height: 100px;" :src="item.coverUrl">
                        </el-image>
                    </div>
                </div>
            </div>
        </div>
        <input type="file" @change="cardPicChange($event)" accept="image/*" id="coverUrl" style="display:none" />

        <select-question :questionVisible.sync="questionVisible" @getRecData="getRecData" :questionId="questionId"></select-question>
    </div>
</template>

<script>
import { lingYanUpload } from "@/utils/upload";
import selectQuestion from "@/components/selectQuestion"
export default {
    name: "guideCards",
    props: {
        guideCards: {
            type: Array,
            default: () => []
        }
    },
    data() {
        return {
            list: this.guideCards,
            currentIndex: 0,
            currentUploadIndex: 0,
            questionVisible: false,
            questionId: "",
        }
    },
    methods: {
        async cardPicChange(event) {
            var uuid = "uuid-" + new Date().getTime();
            var upload = await lingYanUpload(event.target.files[0], uuid);
            if (upload?.data?.remoteURL) {
                this.$set(this.list[this.currentUploadIndex], 'coverUrl', upload.data.remoteURL);
            }
            document.getElementById("coverUrl").value = "";
        },
        addCard() {
            if (this.list.length > 5) {
                return this.$antMessage.warning("最多添加6个卡片");
            }
            var obj = {
                name: "",
                link: "",
                coverUrl: "",
            }
            this.list.push(obj);
        },
        cardUp(index) {
            if (index != 0) {
                var tempOption = this.list[index - 1];
                this.$set(this.list, index - 1, this.list[index]);
                this.$set(this.list, index, tempOption);
            }
        },
        cardDown(index) {
            if (index != this.list.length - 1) {
                var tempOption = this.list[index + 1];
                this.$set(this.list, index + 1, this.list[index]);
                this.$set(this.list, index, tempOption);
            }
        },
        delCard(index) {
            this.list.splice(index, 1);
        },
        cardUpload(i) {
            this.currentUploadIndex = i;
            document.getElementById("coverUrl").click();
        },
        relationKnowledge(index) {
            this.currentIndex = index;
            this.questionVisible = true;
            this.questionId = this.list[index].questionId;
        },
        getRecData(data) {
            this.$set(this.list[this.currentIndex], "questionId", data.questionId);
            this.$set(this.list[this.currentIndex], "question", data.question);
            // setTimeout(()=>{
            this.$parent.$parent.$parent.$refs.channelForm.clearValidate("guideCards");
            // },100)

        }
    },
    watch: {
        guideCards(val) {
            this.list = val;
        },
        list(val) {
            this.$emit("update:guideCards", val);
        }
    },
    components: {
        selectQuestion
    }
}
</script>

<style lang="scss">
.guideCards {
    .addImg {
        background: #eaeef4 !important;
    }
    .channelCard {
        margin-left: 0 !important;
        .cardItem {
            display: flex;
            margin-bottom: 10px;
            .label {
                display: inline-block;
                width: 60px;
                text-align: right;
                flex-shrink: 0;
                margin-right: 20px;
            }
            .cardFlex {
                display: flex;
                width: calc(100% - 80px);
                p {
                    white-space: nowrap;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    cursor: pointer;
                    span {
                        color: #6b5ee2;
                    }
                }
                .iconfont {
                    flex-shrink: 0;
                    color: #b7c1c9;
                    font-size: 22px;
                    cursor: pointer;
                    margin-left: 8px;
                }
            }
        }
    }
}
</style>
